<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__STATIC__/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
    <style>
        .icon_lists .Hui-iconfont {
            font-size: 38px;
            line-height: 100px;
            margin: 10px 0;
            color: #333;
            -webkit-transition: font-size 0.25s ease-out 0s;
            -moz-transition: font-size 0.25s ease-out 0s;
            transition: font-size 0.25s ease-out 0s;
        }
        .icon_lists li {
            float: left;
            width: 100px;
            height: 190px;
            text-align: center;
        }
    </style>
</head>
<body onload="prettyPrint()">
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
    首页 <span class="c-gray en">&gt;</span>
    页面模板 <span class="c-gray en">&gt;</span>
    表格 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="Hui-article">
    <article class="cl pd-20">
        <h1 class="page_title">panel 面板</h1>
        <h2>默认面板效果，内容放到panel-body</h2>
        <div class="panel panel-default">
            <div class="panel-body">默认面板</div>
        </div>
        <h2>带标题的面板</h2>
        <div class="panel panel-default">
            <div class="panel-header">面板标题</div>
            <div class="panel-body">面板内容</div>
        </div>
        <h2>其他颜色面板</h2>
        <div class="panel panel-primary">
            <div class="panel-header">面板标题</div>
            <div class="panel-body">面板内容</div>
        </div>
        <div class="panel panel-secondary mt-20">
            <div class="panel-header">面板标题</div>
            <div class="panel-body">面板内容</div>
        </div>
        <div class="panel panel-success mt-20">
            <div class="panel-header">面板标题</div>
            <div class="panel-body">面板内容</div>
        </div>
        <div class="panel panel-warning mt-20">
            <div class="panel-header">面板标题</div>
            <div class="panel-body">面板内容</div>
        </div>
        <div class="panel panel-danger mt-20">
            <div class="panel-header">面板标题</div>
            <div class="panel-body">面板内容</div>
        </div>
        <p>默认面板之间是紧挨在一起，没有间距的，如果需要设置间距，请在 <b class="c-primary">class="panel</b> 后面追加间距样式，如：<b class="c-primary">mt-20</b>，效果如同上面的例子。</p>
        <p><span class="label label-primary">举个栗子：</span> &lt;div class="panel panel-danger mt-20"&gt;</p>
        <h3>HTML 代码</h3>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-default"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">	</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-header"</span><span class="tag">&gt;</span><span class="pln">面板标题</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">	</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">面板内容</span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
        <h3>CSS代码</h3>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pun">.</span><span class="pln">panel</span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff; border:solid 1px transparent}</span></li><li class="L1"><span class="pln">	</span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln">solid </span><span class="lit">1px</span><span class="pln"> transparent</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="lit">8px</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">14px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="lit">700</span><span class="pun">}</span><span class="com">/*面板标题*/</span></li><li class="L2"><span class="pln">	</span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">body</span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">}</span><span class="com">/*面板内容*/</span></li><li class="L3"><span class="pln">	</span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">footer</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f5f5f5;border-top: 1px solid #ddd;padding:5px 20px}/*面板页脚*/</span></li><li class="L4"><span class="com">/*默认面板*/</span></li><li class="L5"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="kwd">default</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ddd}</span></li><li class="L6"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="kwd">default</span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ddd; background-color:#f5f5f5; color:#444}</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="com">/*主要面板*/</span></li><li class="L9"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#5a98de}</span></li><li class="L0"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">primary </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#5a98de; background-color:#5a98de; color:#fff}</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="com">/*次要面板*/</span></li><li class="L3"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#3bb4f2}</span></li><li class="L4"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">secondary </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#3bb4f2; background-color:#3bb4f2; color:#fff}</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="com">/*成功面板*/</span></li><li class="L7"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">success</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#5eb95e}</span></li><li class="L8"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">success </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#5eb95e; background-color:#5eb95e; color:#fff}</span></li><li class="L9"><span class="pln">&nbsp;</span></li><li class="L0"><span class="com">/*警告面板*/</span></li><li class="L1"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">warning</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#f37b1d}</span></li><li class="L2"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">warning </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#f37b1d; background-color:#f37b1d; color:#fff}</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="com">/*危险面板*/</span></li><li class="L5"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">danger</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#dd514c}</span></li><li class="L6"><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">danger </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">panel</span><span class="pun">-</span><span class="pln">header</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#dd514c; background-color:#dd514c; color:#fff}</span></li></ol></pre>
        <!--高速版-->
        <div id="SOHUCS" sid=""></div>
        <!-- <script charset="utf-8" type="text/javascript" src="//changyan.sohu.com/upload/changyan.js" ></script>
        <script type="text/javascript">
            window.changyan.api.config({
                appid: 'cystmLO0N',
                conf: 'prod_06226f5d322c22bcd421cb90462fe2a2'
            });
        </script> -->

    </article>

</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/prettify.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>